<template>
  <view class="container">
    <view class="tab-box">
      <view :class="['tab', status == 0 ? 'active' : '']" @click="changeStatus(0)">全部</view>
      <view :class="['tab', status == 1 ? 'active' : '']" @click="changeStatus(1)">进行中</view>
      <view :class="['tab', status == 2 ? 'active' : '']" @click="changeStatus(2)">审核中</view>
      <view :class="['tab', status == 3 ? 'active' : '']" @click="changeStatus(3)">已完成</view>
    </view>

    <view class="list-box">
      <view class="box" v-for="(item, index) in list" :key="index">
        <view class="row">
          <view class="name">{{ item.service_name }}</view>
          <view class="status">{{ item.status_desc }}</view>
        </view>
        <view class="row">
          <view class="other">
            <view class="time">{{ item.create_time }}</view>
            <view class="user">联系人：{{ item.user_info.nickname }} {{ item.user_info.mobile }}</view>
          </view>
          <view class="btn" v-if="item.status == 1" @click="applyComplete(item.id, index)">申请完成</view>
        </view>
      </view>
    </view>

  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      status: 0,
      page: 1,
      pagesize: 10,
    };
  },

  onLoad() {
    this.planList();
  },

  onReachBottom() {
    this.planList(this.page + 1)
  },

  methods: {
    changeStatus: function (status) {
      this.status = status;
      this.page = 1;
      this.planList();
    },

    applyComplete: function (id, index) {
      var list = this.list;

      uni.showModal({
        title: '提示',
        content: '确定要申请完成吗？',
        success: (res) => {
          if (res.confirm) {
            this.$http.post('/index/Api/applyComplete', {id}).then(res => {
              if (res.data.result == 1) {
                list[index].status = 2;
                list[index].status_desc = '审核中';

                uni.showToast({
                  title: res.data.msg
                })
              } else {
                uni.showToast({
                  title: res.data.msg,
                  icon: 'none'
                })
              }
            })
          }
        }
      })
    },

    planList: function (incPage = 0) {
      var page = incPage ? incPage : this.page;

      uni.showLoading({
        title: '数据加载中...',
        mask: true
      })

      this.$http.post('/index/Api/planList', {
        user_id: uni.getStorageSync('user_id'),
        status: this.status,
        page: page,
        pagesize: this.pagesize
      }).then((res) => {
        if (res.data.result == 1) {
          if (page == 1) {
            this.list = res.data.data;
          } else {
            // 加载更多
            var list = this.list;

            for (var i = 0; i < res.data.data.length; i++) {
              list.push(res.data.data[i]);
            }

            this.list = list;
            this.page = page;
          }

          setTimeout(() => {
            uni.hideLoading();
          }, 500)
        } else {
          uni.hideLoading();
          if (page == 1) {
            this.list = [];
          } else {
            this.$common.doErrorResult(res);
          }
        }
      })
    },
  },
}
</script>

<style lang="scss">
.container {
  .tab-box {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    background: #fff;
    height: 100rpx;
    align-items: center;
    justify-content: space-around;
    padding: 0 20rpx;

    .active {
      color: $main-color;
    }
  }

  .list-box {
    padding: 0 20rpx;
    margin-top: 120rpx;
    display: flex;
    flex-direction: column;

    .box {
      border-radius: 20rpx;
      background: #fff;
      padding: 20rpx;
      margin-bottom: 20rpx;

      .row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 100rpx;

        .name {
          font-size: 32rpx;
          color: $main-color;
        }

        .status {
          font-size: 32rpx;
        }

        .other {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          height: 80rpx;

          .time, .user {
            color: $main-blank;
            font-size: 24rpx;
          }
        }

        .btn {
          color: $main-color;
          border: 2rpx solid $main-color;
          border-radius: 40rpx;
          padding: 10rpx 20rpx;
        }
      }
    }
  }
}
</style>

